<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小球移动</title>
    <style type="text/css">
        *{padding:0;margin:0;}
        #container{
            width:1400px;
            height:600px;
            border: 5px solid #ccc;
            margin-left: 50px;
            margin-top: 30px;
            position:relative;
        }
        #boll{
            width:50px;
            height:50px;
            top:100px;
            left: 100px;
            background: #0ad292;
            border-radius: 50%;
            position: absolute;
        }
        #btn{
            width:200px;
            height:50px;
            /*border: 1px solid #ccc;*/
            text-align: center;
            top: 12px;
            left:600px;
            position: relative;
            margin-top: 12px;
        }
    </style>
</head>
<body>
    <div id="btn">
        <button id="moveTop" type="button" class="btn btn-default">上</button>
        <button id="moveDown" type="button" class="btn btn-default">下</button>
        <button id="moveLeft" type="button" class="btn btn-default">左</button>
        <button id="moveRight" type="button" class="btn btn-default">右</button>
        <button id="stopMove" type="button" class="btn btn-default">停止</button>
    </div>
    <div id="container">
        <div id="boll"></div>
    </div>

    <script type="text/javascript">
        let speed = 1;//定义移动速率
        let boll = document.getElementById("boll");//获取小球
        let container = document.getElementById("container");//获取容器
        let time; //储存最新的定时器
        //console.log(boll); //拿到小球的div
        document.getElementById("moveTop").onclick=function () {
            moveTopOrDown(-speed);
        }
        document.getElementById("moveDown").onclick=function () {
            moveTopOrDown(speed);
        }
        document.getElementById("moveLeft").onclick=function () {
            moveLeftOrRight(-speed);
        }
        document.getElementById("moveRight").onclick=function () {
            moveLeftOrRight(speed);
        }
        document.getElementById("stopMove").onclick=function () {
            clearTimeout(time);
        }




        function moveTopOrDown(speed) {
            //console.log(boll.offsetTop,boll.offsetLeft);
            clearTimeout(time); // 每次点击.就清除上次的定时器,保证始终只有一个定时器
            // let top = parseFloat(window.getComputedStyle(boll, null).top);
            let top = boll.offsetTop;  //同样可以获取小球的位置  但是获取的值是 只读 属性
            //console.log(top); // 拿到小球的位置,距离顶部top
            boll.style.top = top + speed + "px"; //修改小球的top边距
            time = setTimeout(moveTopOrDown, 5, speed); //启动定时器  并且把参数加在后边
        }

        function moveLeftOrRight(speed) {
            console.log(boll.offsetTop,boll.offsetLeft);
            clearTimeout(time);
            // let left = parseFloat(window.getComputedStyle(boll, null).left);
            let left = boll.offsetLeft;
            boll.style.left = left + speed + 'px';
            time = setTimeout(moveLeftOrRight, 5, speed); //
        }
    </script>



    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
